<!--
 * @Description: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-07-28 23:06:59
-->
<template>
  <div class="point-container">
    <DileTooltip :content="abnormalContent" />
    <div class="point-img-container">
      <!-- 点位背景图 -->
      <el-image
        :src="
          !!pointInfo.pointImg
            ? Dile_Methods.getFileUrl(pointInfo.pointImg)
            : ''
        "
        fit="scale-down"
        lazy
        @click="handlePointClick"
      >
        <template #error>
          <el-empty
            :description="
              !pointInfo.pointImg
                ? $t(`page.messageArr.pleaseUploadPointImg`)
                : ' '
            "
          />
        </template>
      </el-image>
      <!-- 点位信息展示 -->
      <div
        v-for="(point, index) in pointInfo.pointArr"
        :key="point.id"
        :class="[
          'point-info',
          point.id == pointInfo.pointId ? 'is-active' : '',
        ]"
        :style="{
          left: `calc((${point.x}px - var(--point-width)/2) * var(--point-img-ratio))`,
          top: `calc((${point.y}px - var(--point-width)/2) * var(--point-img-ratio))`,
          backgroundColor: `var(--point-level-color-${point.level})`,
        }"
        @click="() => !readonly && pointInfo.pointArr.splice(index, 1)"
      >
        <span @click="handlePointClick2(point)">
          {{
          currentPointInfo(point.abnormalInfo) || index + 1
          }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, watch, nextTick } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import Dile_Methods from "@/utils/methods";
import DileTooltip from "@/components/dile-tooltip/index.vue";
import { onMounted } from "vue";

const emit = defineEmits([]);
const props = defineProps({
  pointInfo: {
    type: Object,
    default: {},
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});

/**
 * @Author: xzh
 * @Description: 缩放比例
 * @Param:
 */
let ratio = ref<number>(1);
/**
 * @Author: xzh
 * @Description: 初始化
 * @Param:
 */
onMounted(() => {
  //尺寸自适应适配
  initsizeRatio();
});

/**
 * @Author: xzh
 * @Description: 加载缩放比例
 * @Param:
 */
let initsizeRatio = async () => {
  await nextTick();
  //400px - 16:9
  //获取当前高度
  let containerDom: object_Inf =
      document.querySelector(".point-img-container") || {},
    { clientHeight } = containerDom;
  //获取基准高度
  let normHeight = Number(
    Dile_Methods.getCssPropertyValue(
      "--point-img-heidth",
      containerDom
    ).replace("px", "") || 400
  );
  //获取缩放比例
  ratio.value = clientHeight / normHeight;
  //设置缩放比例
  containerDom.style.setProperty("--point-img-ratio", `${ratio.value || 1}`);
};
/**
 * @Author: xzh
 * @Description: 点位图点击
 * @Param:
 * @param {*} e
 */
let handlePointClick = (e: any) => {
  let { offsetX, offsetY } = e,
    { pointArr } = toRefs(props.pointInfo);
  //添加点位
  !props.readonly &&
    pointArr.value.push({
      id: Dile_Methods.newGuid(),
      x: offsetX / ratio.value,
      y: offsetY / ratio.value,
      level: [5],
      alarmIds: [],
    });
};

const currentPointInfo = (str1: string) => {
  return str1?.replace(/[^\d]/g, " ");
};
/**
 * @Author: xzh
 * @Description: 选中点位信息
 * @Param:
 * @param {*} computed
 */
let abnormalContent = computed(() => {
  let { pointId, pointArr } = props.pointInfo,
    selectPoint = pointArr?.find((x: object_Inf) => x.id == pointId) || {};

  return Object.keys(selectPoint).length > 0
    ? `${selectPoint.abnormalInfo}-${selectPoint.abnormalContent}`
    : "";
});

const handlePointClick2 = (point: any) => {
  let { id } = point;
  Object.assign(props.pointInfo, {
    pointId: id,
  });
};
</script>
<style lang="scss" scoped>
.point-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  ::deep(> .over-flow) {
    flex: 1.5rem 0 0;
  }
  .point-img-container {
    flex: 1;
    height: 0;
    position: relative;
    .el-image {
      height: calc(var(--point-img-heidth) * var(--point-img-ratio));
      width: calc(var(--point-img-heidth) * (16 / 9) * var(--point-img-ratio));
      :deep(img) {
        -webkit-user-drag: none !important;
      }
    }
    .point-info {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--point-width);
      height: var(--point-width);
      border-radius: 50%;
      border: 2px solid black;
      font-size: 0.75rem;
      font-weight: bold;
      color: black;
      &:is(.is-active) {
        // color: var(--el-color-primary);
        color: #409eff;
        border: 2px solid #409eff;
      }
    }
    --point-level-color-5: red;
    --point-level-color-4: #ec9f04;
    --point-level-color-3: yellow;
    --point-level-color-2: green;
    --point-level-color-1: green;
    --point-width: 1.2rem;
    --point-img-heidth: 400px;
    --point-img-ratio: 1;
  }
}
</style>
